<template>
    <div style="margin-top: 10px;">
        <h3 class="title error">健康雷达图</h3>
        <div class="radar">
            <div ref="chart" style="width:100%;height:376px"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ServiceRadar",
        data() {
            return {
                echartData: [],
                myChart: null,
                option: {}
            }
        },
        props: ["radarData"],
        watch: {
            radarData : {
                handler(newValue, oldValue) {
                    console.log(newValue);
                    if (newValue != undefined) {
                        this.echartData = new Array();
                        this.echartData.push(!newValue.success ? 1 : newValue.success);
                        this.echartData.push(!newValue.timeCost ? 1 : newValue.timeCost);
                        this.echartData.push(!newValue.notify ? 1 : newValue.notify);
                        this.echartData.push(!newValue.servCount ? 1 : newValue.servCount);

                        this.option.series[0].data[0].value = this.echartData;
                        this.myChart.setOption(this.option);
                    }
                },
                deep: true
            }
        },
        mounted() {
            this.getEchartData();
        },
        methods: {
            getEchartData() {
                let that = this;
                const chart = this.$refs.chart;
                if (chart) {
                    this.myChart = this.$echarts.init(chart);
                    this.option = {
                        // title: {
                        //     text: '基础雷达图'
                        // },
                        tooltip: {},
                        legend: {
                            data: ['预算分配（Allocated Budget）']
                        },
                        radar: {
                            // shape: 'circle',
                            name: {
                                textStyle: {
                                    color: '#999',
                                    // backgroundColor: '#999',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                }
                            },
                            indicator: [
                                { name: '成功率', max: 10 },
                                { name: '平均响应时间', max: 10 },
                                { name: '注册订阅', max: 10 },
                                { name: '调用次数', max: 10 }
                            ]
                        },
                        series: [
                            {
                                name: '',
                                type: 'radar',
                                // areaStyle: {normal: {}},
                                data: [
                                    {
                                        value: that.echartData,
                                        areaStyle: {
                                            normal: {
                                                color: '#fed8e2'
                                            }
                                        },
                                        lineStyle: {
                                            color: '#F9B6A9' // 雷达构成的区域边框
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    this.myChart.setOption(this.option, true);
                    window.addEventListener('resize', function () {
                        this.myChart.resize();
                    });
                }
                this.$on('hook:destroyed', () => {
                    window.removeEventListener('resize', function () {
                        this.myChart.resize();
                    });
                });
            }
        }


    }
</script>

<style lang="scss" scoped>
    .title {
        border: 0px solid #fff;
        border-left-color: #ff7462;
        border-left-width: 2px;
        border-left-style: solid;
        padding-left: 10px;
        border-radius: 0;
        font-size: 14px;
        height: 10px;
        line-height: 10px;
    }

    .radar {
        margin-top: 10px;
        border-top: 1px solid #e4e7ed;
    }
</style>